
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Vue from Scratch</title>
    <script src="./index.js"></script>
  </head>

  <body>
    <script>
    
      const MyComponent = new Component({
        template: `
          <div class="my-component">
            <div class="container">
              <p class="message">Count: {{ count }}</p>
              <div class="buttons">
                <button data-action="increment">Increment</button>
                <button data-action="decrement">Decrease</button>
              </div>
            </div>
          </div>
        `,
        data() {
          return {
            count: 0,
          };
        },
        methods: {
          increment() {
            this.count += 1;
          },
          decrement() {
            this.count -= 1;
          },
        },
        style: `
          .my-component {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background: #f0f0f0;
          }
          .my-component .container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
          }
          .my-component .message {
            font-size: 24px;
            margin-bottom: 20px;
          }
          .my-component .buttons button {
            font-size: 16px;
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            transition: background 0.3s;
          }
          .my-component .buttons button:hover {
            background: #ddd;
          }
          .my-component .buttons button:active {
            background: #ccc;
          }
        `,
        rootId: "root", // Specify the ID for the root element
      });

      // Ensure CSS is applied to the component
      const style = document.createElement("style");
      style.textContent = MyComponent.style;
      document.head.appendChild(style);
    </script>
</body>
</html>
